<template>
	<div class="super-table">
		<div class="super-table-header" v-if="$slots['header-left'] || $slots['header-right']" :style="{marginBottom: ($slots['header-right'] ? 0 : 10) +'px'}">
			<div class="super-table-header-left">
				<slot name="header-left"></slot>
			</div>
			<div v-if="$slots['header-right']" class="super-table-header-right ui-form-inline">
				<slot name="header-right"></slot>
			</div>
		</div>
		<Table
			ref="table"
			:columns="columns"
			:data="dataList"
			:height="height"
			:max-height="maxHeight"
			:loading="cloneLoading"
			:border="border"
			:size="size"
			:stripe="stripe"
			:draggable="draggable"
			:span-method="spanMethod"
			:show-summary="showSummary"
			:sum-text="sumText"
			:summary-method="summaryMethod"
			@on-expand="handleExpand"
			@on-selection-change="handleSelectionChange"
			@on-drag-drop="handleDragDrop"
		>
			<template slot="header"><slot name="header"></slot></template>
			<template v-for="item in slots" slot-scope="{row, column, index}" :slot="item.slot">
				<slot :row="row" :column="column" :index="index" :name="item.slot"></slot>
			</template>
		</Table>
        <div v-if="pagination">
            <FooterBar v-if="fixedFooter">
                <template slot="left">
                    <slot name="page-left"></slot>
                </template>
                <Page
                    slot="right"
                	:current="page.current"
                    :page-size-opts="[10, 20, 30, 40, 100]"
                	:page-size="page.size"
                	:total="page.total"
                	show-total
                	show-elevator
                	show-sizer
                	@on-change="handleChangePage"
                	@on-page-size-change="handleChangePageSize"
                />
            </FooterBar>
            <div v-else class="super-table-page">
            	<div class="super-table-page-left">
            		<slot name="page-left"></slot>
            	</div>
            	<Page
            		:current="page.current"
                    :page-size-opts="[10, 20, 30, 40, 100]"
            		:page-size="page.size"
            		:total="page.total"
            		show-total
            		show-elevator
            		show-sizer
            		@on-change="handleChangePage"
            		@on-page-size-change="handleChangePageSize"
            	/>
            </div>
        </div>
	</div>
</template>

<script>
import FooterBar from '@/components/utils/footer-bar.vue';
import request from '@/api/request.js';
export default {
	name: 'SuperTable',
    components: {
        FooterBar
    },
	props: {
		// 接口路径地址
        path: {
            type: String,
            default: ''
        },
        // 请求参数
        params: {
            type: Object,
            default: function() {
            	return {};
            }
        },
		columns: {
			type: Array,
			default: function() {
				return [];
			}
		},
		stripe: {
			type: Boolean,
			default: false
		},
		border: {
			type: Boolean,
			default: false
		},
		height: Number | String,
		maxHeight: Number | String,
		loading: {
            type: Boolean,
            default: true
        },
		size: {
            type: String,
            default: 'default'
        },
		draggable: {
			type: Boolean,
			default: false
		},
		spanMethod: Function,
		showSummary: {
			type: Boolean,
			default: false
		},
		sumText: {
            type: String,
            default: ''
        },
		summaryMethod: Function,
		pagination: {
			type: Boolean,
			default: true
		},
		defaultData: {
			type: Array,
			default: function() {
				return [];
			}
		},
        // 是否自动加载
        auto: {
            type: Boolean,
            default: true
        },
        method: {
            type: String,
            default: 'get'
        },
        // fixed footer
        fixedFooter: {
            type: Boolean,
            default: true
        }
	},
	data() {
		return {
			dataList: [],
			// columns插槽
			slots: [],
            // 分页
            page: {
                current: 1,
                size: this.params.pageSize || 10,
                total: 0
            },
			cloneLoading: false
		}
	},
	mounted() {
		if(this.defaultData.length > 0) {
			this.dataList = this.defaultData;
		}
		// 获取columns里的slot
		this.slots = this.columns.filter(item => {
			return item.slot;
		})
		// 初始化
        if(this.auto) {
            this.init();
        }
	},
	watch: {
        /* params: {
            handler(cur, old) {
                this.init();
            },
            deep: true
        }, */
        defaultData: {
        	handler(cur, old) {
                this.dataList = cur;
            },
            deep: true
        }
    },
	methods: {
		init() {
			this.params.page = 1;
            this.handleLoadData();
		},
        reload() {
            this.handleLoadData();
        },
        handleLoadData() {
            if(!this.path) return false;
            this.cloneLoading = this.loading;
            let params = this.params;
            if(this.method === 'get') {
                params = {params: params}
            }
            request[this.method](this.path, params).then((res) => {
                // 数据设置
                if (this.pagination === true) {
                    // 返回的数据为空，且非第一页时，需重新加载前一页的数据
                    if(res.items.length === 0 && res.pageInfo.currentPage !== 1) {
                        this.params.page = this.params.page - 1;
                        this.handleLoadData();
                        return false;
                    }
                    this.dataList = res.items;
                    this.page.total = res.pageInfo.total;
                    this.page.current = res.pageInfo.currentPage;
                } else {
                    this.dataList = res;
                }
                this.cloneLoading = false;
                this.$emit('on-loaded', true);
                this.$emit('on-selection-change', []);
            }).catch((err) => {
                this.cloneLoading = false;
                this.$emit('on-loaded', false);
            });
        },
		// 切换页码
		handleChangePage(page) {
            if (this.pagination === true) {
                this.params.page = page;
                this.handleLoadData();
            }
        },
        // 切换每页条数
        handleChangePageSize(size) {
        	if (this.pagination === true) {
        		this.params.page = 1;
                this.params.pageSize = size;
                this.handleLoadData();
            }
        },
		// 展开或收起某一行
		handleExpand(row, status,) {
			this.$emit('on-expand', row, status);
		},
		// 多选，选项发生变化
		handleSelectionChange(selection) {
			this.$emit('on-selection-change', selection);
		},
		// 拖拽排序松开触发
		handleDragDrop(index1, index2) {
			this.$emit('on-drag-drop', index1, index2);
		}
	}
}
</script>

<style lang="less" scoped>
.super-table {
	&-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		&-left {
			margin-right: 20px;
			white-space: nowrap;
		}
	}
	&-page {
		display: flex;
		margin-top: 10px;
		justify-content: space-between;
		&-left {
			line-height: 32px;
		}
	}
}
.ui-form-inline .ivu-input-wrapper {
    vertical-align: top;
}
</style>